<template>
    <div class="searchResult">
        <div class="helpCenter">
            <div class="helpCenterTopSearch">
                <div class="helpCenterTopSearchCenter">
                    <div class="helpCenterTitle">
                        <span>帮助中心</span>
                    </div>
                    <Row>
                        <Col :span="16" offset="4">
                        <Input class="search_input" type="text" v-model="title" @keyup.enter.native="searchBykeyword" placeholder="请输入关键字搜索">
                        <span slot="prepend">
                            <Icon type="ios-search-strong"></Icon>
                        </span>
                        <span slot="append" @click="searchBykeyword">搜索</span>
                        </Input>
                        </Col>
                    </Row>
                    <div class="helpCenterTip">
                        <span v-if="searchTip.length">关键词:</span>
                        <ul id="ul_menus">
                            <li v-for="(item,index) in searchTip" :key="index">
                                <a :class="item.selected?'active':''" @click="changeTitle(item.keyword)">{{item.keyword}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <ul class="location">
            <li>
                <a href="/">
                    <i class="iconfont icon-zhuye"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <span>&gt;</span>
            </li>
            <li>
                <a href="/helpCenter">帮助中心</a>
            </li>
            <li>
                <span>&gt;</span>
            </li>
            <li>
                <a>搜索结果</a>
            </li>
            <li>
                <!-- <ul class="loaction-tip">
                    <li v-if="selectedGoodType!=null">
                        <a>{{selectedGoodType.name}} </a>
                    </li>
                    <li @click="closeGoodType2" v-if="selectedGoodType2!=null">
                        <a>{{selectedGoodType2.name}}
                            <i class="iconfont icon-guanbi"></i>
                        </a>
                    </li>
                    <li @click="closeGoodType3(index)" v-if="selectedGroups.length!=0" v-for="(item,index) in selectedGroups" :key="index">
                        <a>{{item.value}}
                            <i class="iconfont icon-guanbi">
                            </i>
                        </a>
                    </li>
                </ul> -->
            </li>

        </ul>
        <Row class="helpContent">
            <Col span="6" class="left-content">
            <div class="left-title">
                <span>帮助中心</span>
            </div>
            <Tree :data="tree" :render="renderContent"></Tree>
            </Col>
            <Col span="17" offset="1" class="right-content">
            <div class="right-title">
                <span class="temp-title">一共搜出
                    <em style="color:#fe0200">{{totals}}</em>个结果</span>
            </div>

            <div class="temp-content">
                <div class="temp-box" v-if="totals>0">
                    <Row class="temp-box-que" v-for="(item,index) in dataDetail" :key="index">
                        <Col span="3" class="temp-que-top">
                        <Icon type="ios-help-outline"></Icon>
                        <span>问:</span>
                        </Col>
                        <Col span="21" class="temp-que-down">
                        <nuxt-link :to="{path:'/helpCenter/helpCenterSecDetail',query:{
                                        id:item.id
                                        }}">{{item.title}}
                        </nuxt-link>
                        </Col>
                    </Row>

                </div>
                <div class="list-box" v-if="totals==0">
                    <img src="~assets/images/searchNo.png" />
                    <span class="box-sorry">非常抱歉,没能解决您的问题</span>
                    <span class="box-concat">您可以通过屏幕左下角的电活,联系我们!</span>
                </div>

            </div>
            <div class="center-page " v-if="totals>0">
                <mypager :total="totals" :rows="page.rows" :current="page.page" @change="change">
                </mypager>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
import portal from "~/net/portal"
import mypager from "~/components/Mypager"
import simplePager from "~/components/SimplePager"
import { searchCodes } from "~/constant/SearchCodes"
import { absUrl } from "~/utils/tool"
export default {
    name: "helpCenter",
    data() {
        return {
            title: '',
            totals: '',
            searchTip: [
                { name: '新手' },
                { name: '注册' },
                { name: '技术经理人' },
                { name: '开店' }
            ],
            tree: [


            ],
            dataDetail: {

            },
            page: {
                page: 1,
                rows: 10
            }
        }
    },
    components: {
        mypager
    },
    computed: {

    },
    watch: {
        '$route'(to, from) {
            this.asyncDataSearch()
        },

    },
    created() {
        this.tree.map(_ => {
            console.log(_.children)
            if (_.children) {

                _.children.forEach(x => {
                    return x.title = x.name
                });
            }
        })
    },
    async asyncData(context) {
        let [resp1, resp2, resp3] = await Promise.all([
            portal.getHelpContentsByTitle({
                query: {
                    page: 1,
                    rows: 10,
                    title: context.query["title"],
                },
                client: context.req
            }),
            portal.getHelpCategories({

                client: context.req
            }),
            portal.selectHelgetHelpKeywordKeyword({
                client: context.req
            })
        ]);
        let data1 = resp1.data;
        let data2 = resp2.data;
        let data3 = resp3.data;
        return {
            totals: data1.total,
            dataDetail: data1.rows,//问题答案详情
            searchTip: data3,
            tree: data2.map(_ => {
                return {
                    title: _.name,
                    expand: false,
                    //问题答案内容的  二级类目id    x.id =  data1.categoryChildId  则 一级类目被打开
                    children: _.children
                }

            })

        }
    },

    methods: {
        asyncDataSearch() {
            portal.getHelpContentsByTitle({
                query: {
                    page: this.page.page,
                    rows: this.page.rows,
                    title: this.$route.query.title,
                },
            }).then(res => {
                let { code, data, message } = res;
                if (code == '0000') {
                    this.title = ''
                    this.totals = data.total
                    this.dataDetail = data.rows
                }
            })
        },
        renderContent(h, { root, node, data }) {
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%',
                    height: '40px'
                },
                'class': {
                    'ivu-tree-span': true
                }
            }, [
                    h('span', {

                    }, data.title),
                    h('span', {
                        'class': {
                            'ivu-tree-arrow new-style': true
                        }
                    }, [
                            h('i', {
                                'class': {
                                    'ivu-icon ivu-icon-chevron-left': data.expand ? '' : true,
                                    'ivu-icon ivu-icon-chevron-down': data.expand ? true : ''
                                },
                                on: {
                                    click: () => {
                                        let newArray = []
                                        this.tree.map(_ => {
                                            newArray.push(_.nodeKey)
                                        })
                                        if (newArray.indexOf(data.nodeKey) > -1) {
                                            root.map(_ => _.node.expand = false);
                                            if (data.expand) {
                                                data.expand = false
                                            } else {
                                                data.expand = true
                                            }
                                        }
                                        data.selected = true
                                        // data.expand ? data.expand = true : data.expand = false

                                        if (node.node.id) {
                                            this.$router.push('/helpCenter/helpCenterSec?id=' + node.node.id)
                                            //   <nuxt-link :to="{path:'/goods',query:{id:item.id}}">
                                        }
                                        console.log(root)
                                        console.log(node.node.id)
                                        console.log(data)
                                        console.log(data.expand)
                                    }
                                }
                            })
                        ])
                ]);
        },
        searchBykeyword() {
            this.$router.push('/helpCenter/searchResult?title=' + this.title)
        },
        changeTitle(val) {
            this.title = val
            this.searchBykeyword()
        },
        change(page) {
            this.page.page = page;
            this.asyncDataSearch();
        },
    }
}
</script>

<style lang='less'>
.searchResult {
  .helpCenter {
    width: 100%;
    height: auto;
    .helpCenterTopSearch {
      width: 100%;
      text-align: center;
      background: #2489f3;
      height: auto;
      .helpCenterTopSearchCenter {
        width: 990px;
        margin: 0 auto;
        height: 100%;
        position: relative;
        overflow: hidden;

        .helpCenterTitle {
          text-align: center;
          span {
            font-size: 36px;
            line-height: 72px;
            color: #fff;
          }
        }
        .search_input {
          height: 40px;
          .ivu-input-group-prepend {
            border-radius: 0px;
            background-color: white;
            border-right: 0;
            span {
              padding: 8px;
              i {
                font-size: 20px;
              }
            }
          }
          .ivu-input {
            height: 40px;
            line-height: 40px;
            border-left: 0px;
          }
        }
        .ivu-input-group-append {
          border-radius: 0px;
          background-color: #f8f8f9;
          cursor: pointer;
          span {
            padding: 18px;
            font-size: 16px;
            color: #6a6a6a;
          }
        }
        .helpCenterTip {
          margin-left: 16.66666667%;
          overflow: hidden;
          text-align: left;
          height: 50px;
          padding-top: 9px;
          span {
            float: left;
            line-height: 32px;
            padding: 0 14px;
            text-decoration: none;
            color: #fff;
            font-size: 12px;
          }
          ul {
            display: inline-block;
            height: 32px;
            width: 500px;
            list-style: none;
            overflow: hidden;
            color: #fff;
            li {
              float: left;
              a {
                float: left;
                line-height: 32px;
                padding: 0 14px;
                text-decoration: none;
                color: #fff;
                font-size: 14px;
                font-size: 12px;
              }
              :hover {
                text-decoration: underline;
              }
              span {
                float: left;
                line-height: 32px;
                padding: 0 14px;
                text-decoration: none;
                color: #fff;
                font-size: 14px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
  .location {
    width: 990px;
    margin: 0 auto;
    overflow: hidden;
    padding: 15px 0px;
    li {
      float: left;
      display: inline;
      height: 32px;
      line-height: 32px;
      margin-left: 5px;
      span {
        // top: -0.5px;
        // position: relative;
      }
      a {
        height: 32px;
        line-height: 34px;
        display: inline-block;
        i {
          font-size: 17px;
          display: inline-block;
          width: 26px;
          height: 25px;
        }
        span {
          position: relative;
          top: -2px;
        }
      }
    }
  }
  .helpContent {
    width: 990px;
    height: 500px;
    overflow: auto;
    margin: 0 auto;
    margin-bottom: 40px;
    .left-content {
      height: 500px;
      overflow: auto;
      border: 1px solid #e2ebfb;
      overflow: auto;
      .left-title {
        width: 100%;
        height: 58px;
        span {
          display: block;
          height: 58px;
          line-height: 58px;
          font-size: 20px;
          width: 95%;
          font-weight: 500;
          text-align: left;
          color: #000;
          padding-left: 10px;
          border-bottom: 1px solid #e2ebfb;
        }
      }
      .ivu-tree {
        margin-top: 5px;
        .ivu-tree-children {
          margin-top: 10px;
          li {
            position: relative;
            padding: 0px;
            margin: 0px;
            .ivu-tree-arrow {
              //   float: right;
              //   transform: rotateZ(180deg);
              display: none;
            }
            .ivu-tree-span {
              display: inline-block;
              width: 100%;
              margin-left: 0px;
              font-size: 16px;
              font-weight: 500;
              span {
                padding-left: 10px;
                line-height: 40px;
              }
              .new-style {
                display: inline-block;
                position: absolute;
                width: 100%;
                left: -10px;
                height: 40px;
                text-align: right;
                i {
                  padding: 13px 0px;
                  width: 100%;
                  padding-right: 20px;
                  font-size: 12px;
                  color: #a3a4a7;
                }
              }
            }

            .ivu-tree-title {
              font-size: 16px;
              color: #000;
              font-weight: 500;
              margin-left: 8px;
            }
            .ivu-tree-children {
              padding: 0;
              li {
                .ivu-tree-span {
                  font-size: 14px;
                  color: #a3a4a7;
                  font-weight: normal;
                  margin-left: 0px;
                  display: inline-block;
                  width: 100%;
                  height: 40px;
                  line-height: 40px;
                  span {
                    padding-left: 20px;
                  }
                  .new-style {
                    i {
                      opacity: 0;
                      // background: #2489f3;
                    }
                  }
                  .ivu-span-hover {
                    color: #2489f3;
                    display: inline-block;
                    width: 100%;
                    background-color: #effafe;
                  }
                }
              }
            }
            // .ivu-tree-arrow-open {
            //   i {
            //     transform: rotate(-90deg);
            //   }
            // }

            // .active {
            //   background-color: #eefbfe;
            // }
            // .ivu-tree-children {
            //   margin: 10px 0px 0px;
            //   padding: 0px;
            //   width: 100%;
            //   height: auto;
            //   line-height: 25px;
            //   font-size: 14px;
            //   :hover {
            //     background-color: #eefbfe;
            //     li {
            //       .ivu-tree-span {
            //         color: #2489f3;
            //       }
            //     }
            //   }

            //   li {
            //     .ivu-tree-title {
            //       //   color: #c5d0d5;
            //       width: 100%;
            //       padding: 10px 0px 10px 26px;
            //     }
            //   }
            // }
          }
        }
      }
    }
    .right-content {
      height: 500px;
      overflow: auto;
      border: 1px solid #e2ebfb;
      .right-title {
        width: 100%;
        height: 42px;
        span {
          display: block;
          height: 36px;
          font-size: 20px;
          margin-top: 14px;
          margin-bottom: 10px;
          font-weight: 300;
          text-align: left;
          width: 94%;
          color: #2c2c2c;
          margin-left: 3%;
          padding-left: 5px;
          border-bottom: 1px solid #e2ebfb;
        }
      }
      .temp-content {
        width: 94%;
        margin: 0 auto;
        padding: 10px;
        // min-height: 400px;
        .temp-box {
          font-size: 14px;
          line-height: 28px;
          .temp-box-que {
            color: #2c2c2c;
            overflow: hidden;
            margin-top: 15px;
            .temp-que-top {
              i {
                margin-right: 10px;
                font-size: 22px;
                position: relative;
                top: 4px;
              }
            }
            .temp-que-down {
              //   width: 95%;
              //   display: inline-block;
              //   float: right;
            }
          }
          .temp-box-ans {
            color: #a3a4a7;
            overflow: hidden;
            .temp-que-top {
              //   width: 5%;
              //   display: inline-block;
            }
            .temp-que-down {
              //   width: 95%;
              //   display: inline-block;
              //   float: right;
            }
          }
        }
        .list-box {
          width: 100%;
          display: block;
          text-align: center;
          margin-top: 30px;
          .box-sorry {
            font-size: 24px;
            font-weight: 700;
            color: #000;
          }
          .box-concat {
            font-size: 14px;
            color: #a3a4a7;
            margin-top: 15px;
          }
          img {
          }
          span {
            display: inherit;
          }
        }

        margin-bottom: 40px;
        .temp-title {
          padding: 10px 28px 0px;
          font-size: 14px;
        }

        .ivu-row {
          padding: 0px 28px;
          .ivu-col {
            padding-right: 20px;
            margin-top: 15px;
          }
        }
      }
      .center-page {
        margin: 100px auto 15px;
        text-align: center;
      }
    }
  }
}
</style>
